<template>
  <div class="received">
    <div class="header">
      <van-nav-bar left-arrow flexd @click-left="onClickLeft"></van-nav-bar>
    </div>
    <van-swipe :autoplay="3000" indicator-color="#353535" show-indicators>
      <van-swipe-item>
        <img src="../assets/images/扫码有礼@2x.png" alt  class="img">
        <span class="goodManners">
          <img :src="getParentQrcode" alt="">
        </span>
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/images/扫码送红包@2x.png" alt class="img" />
        <span class="redEnvelopes">
          <img :src="getParentQrcode" alt="">
        </span>
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/images/现信方的@2x.png" alt class="img"/>
        <span class="middle">
          <img :src="getParentQrcode" alt="">
        </span>
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/images/4个关键点@2x.png" alt class="img"/>
        <span class="crux">
          <img :src="getParentQrcode" alt="">
        </span>
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/images/邀请好友@2x.png" alt class="img"/>
        <span class="invitation">
          <img :src="getParentQrcode" alt="">
        </span>
      </van-swipe-item>
    </van-swipe>
    <div class="bottom" @click="toDownLoad">
      <span>下载APP</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "received",
  data() {
    return {
      getParentQrcode:"",
    };
  },
  created() {},
  mounted() {
    this.parentQrcode();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async parentQrcode() {
      let params = {
        token: this.$cookies.get("token")
      };
      const res = await this.$axios.post(this.$api.parentQrcode, params);
      if (res.code == 1) {
        this.getParentQrcode = res.data;
      } else {
        this.$toast("生成二维码失败" + res.msg)
      }
    },
    toDownLoad(){
      window.location.href="http://m.yushin2018.com/download"
    }
  }
};
</script>

<style scoped>
.received {
  background-color: #fff;
  width: 100%;
  height: 100vh;
}
.header >>> .van-nav-bar {
  background-color: #fff;
}
.van-swipe >>> .van-swipe__indicators {
  top: 0.25rem;
}
.van-swipe >>> .van-swipe__indicators .van-swipe__indicator {
  background-color: #ffffff;
}
.bottom {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: center;
}
.bottom span {
  display: block;
  width: 1.16rem;
  height: 0.34rem;
  border: 1px solid #00c6d8;
  line-height: 0.34rem;
  text-align: center;
  color: #00c6d8;
  font-size: 0.12rem;
}
.van-swipe-item span img {
  width: 100%;
}
/* .van-swipe-item {
  position: relative;
} */
.goodManners {
  display: block;
  width: 36%;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:15%;
}
.redEnvelopes {
  display: block;
  width: 36%;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 7%;
  padding: .05rem;
  border: 3px solid #fff;
}
.middle {
  display: block;
  width: 24%;
  position: absolute;
  left: 17%;
  bottom: 4%;
}
.crux {
  display: block;
  width: 26%;
  position: absolute;
  left: 7%;
  bottom: 7%;
}
.invitation {
  display: block;
  width: 46%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25%;
}
</style>
